import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入自动按需导入插件 官方文档有
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// 导入svg地图打包插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

// 动态修改html
import { createHtmlPlugin } from 'vite-plugin-html'

// mock接口
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 80,
    host: true,
    open: true
  },
  base: '/Vue',
  plugins: [
    viteMockServe({
      mockPath: './src/mock',
      localEnabled: true
    }),
    // 动态修改html
    createHtmlPlugin(),
    vue({
      // 响应式语法糖
      reactivityTransform: true
    }),
    // 自动导入的插件，解析器可以是 vant element and-vue 
    Components({
      // dts配置是开启自动生成组件的类型声明文件  默认是true 在本项目不需要 因为我们的项目已经有了vant的类型声明文件
      dts: false,
      // 原因：Toast Confirm 这类组件的样式还是需要单独引入，样式全局引入了，关闭自动引入
      resolvers: [VantResolver({ importStyle: false })]
    }),
    // 打包svg图标
    createSvgIconsPlugin({
      // 指定需要svg打包的目录
      iconDirs: [path.resolve(process.cwd(), 'src/icons')] //path.resolve是转换该指定文件为绝对位置
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})
